<template>
  <div class="sidebar-container">
    <div class="sidebar-title">
      <span>图书类别</span>
    </div>
    <div>
      <div v-for="(item,index) in categoryList" :key="index" class="category">
        <el-button class="btn" @click="toCategory(item.id,item.name)">{{ item.name }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { initBookPageFormAndSearchBookForm } from '@/common/common'
export default {

  data() {
    return {
      bookForm: {
        current: 1,
        size: 20,
        cid: ''
      }
    }
  },
  computed: {
    categoryList() {
      return this.$store.getters.categoryList
    }
  },
  created() {
    this.getCategoryList()
  },
  methods: {
    getCategoryList() {
      if (!this.categoryList || this.categoryList === 0) {
        this.$store.dispatch('category/getList')
      }
    },
    toBookDetail(id) {
      this.$router.push(`/bookDetail/index/${id}`)
    },
    toCategory(id, name) {
      initBookPageFormAndSearchBookForm()
      const searchBookForm = {
        type: 1,
        str: '',
        getBooksByCid: true,
        cid: id,
        orderType: 1,
        from: '',
        to: ''
      }
      this.$store.commit('book/SET_SEARCHBOOKFORM', searchBookForm)
      this.$store.dispatch('book/getBooksByCid').then(res => {
        this.$router.push('/book')
      }).catch()
    }
  }
}
</script>

<style scoped lang="scss">
.sidebar-container {
  height: 300px;
  // background-color: black;
  overflow-y: scroll;
  // overflow-x: ;
  .sidebar-title {
    background-color: #ff5000;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .category {
    display: flex;
    justify-content: center;
    align-items: center;
    // border-bottom: 1px solid;
    .btn {
      width: 100%;
    }
  }
}
</style>
